Sprite Byte: Scrolling Background

Level: Beginner - Intermediate

by Alyce Watson [http://alycesrestaurant.com/]

Home

Random Access Files

Liberty Simple Help2

Scrolling Background

Blood Presure Sim

Cellular Automata

Making Poker Game

Desktop Shortcuts2

Beginners Programming

Demos

Newsletter help

Index


Demo

Setting a Background

You must load a bitmap before it can be used as a background. You can draw a background with graphics commands and use GETBMP to load it. You can also use the LOADBMP command to load it from disk. Once an image is loaded, you can use it as the background for your sprites by issuing a BACKGROUND command. Start your graphics with the DOWN command to insure that they show.

loadbmp "landscape", "sprites\bg1.bmp"
#w.g "down;background landscape"

If the bitmap is not as wide as the grahicbox, the width will be stretched to fit the grahicbox. If it is the same width as the graphicbox or wider, the bitmap width will not be changed. This makes it easy to scroll other parts of the background into view, so you are not limited to the image that will fit into the original graphicbox width. The same is true for the height. If the bitmap is not as high as the graphicbox, the height will be stretched to fit. If it is the same height or higher, it will not be changed.

Locating the Background

The command to locate the background on the graphicbox is BACKGROUNDXY. This places the x,y location specified on the background bitmap at the point 0,0 of the graphicbox. If you want the portion of the background that begins at 100x and 200y to show in the graphicbox, the command looks like this:

#w.g "backgroundxy landscape 100 200"  

Using Variables as Coordinates

When variables are used in sprite commands, they must be placed outside of the quotation marks. The blank spaces between parts of the command must be preserved. Here is the same command as above, with the values expressed as variables.

x = 100 : y = 200
#w.g "backgroundxy landscape ";x;" ";y  

Scrolling Horizontally

Many side-scrolling games use this method. The background moves in a horizontal direction. This is done in a loop, by incrementing or decrementing the X location each time through the loop. If no STEP is specified in the FOR...NEXT loop, the variable is incremented by 1 each time. If a STEP is specified, the variable is incremented by that amount each time, or decremented if STEP is a negative number. You could hard-code this, but you would need hundreds of lines of code! That's why we use variables! Here is a side-scrolling, or horizontally scrolling routine:

for x = 5 to 1000 step 5
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

The Sleep API command pauses the action briefly. If no pause is included, the background scrolls by in a blur!

Scrolling Vertically

Many space and shootem games have backgrounds that scroll vertically, from top to bottom or from bottom to top. This is done by incrementing or decrementing the Y coordinate. Again, we want to do this in a loop with the Y coordinate as a variable.

for y = 5 to 1000 step 5
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy 0 ";y
    #w.g "drawsprites"
next

Scrolling Diagonally

To scroll diagonally, change both the X and Y coordinates at each pass. Notice that all of these routines include a DRAWSPRITES command in each pass through the loop. That is required to update the frame of animation on the screen.

for x = 5 to 1000 step 6
    y = x/2
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy ";x;" ";y
    #w.g "drawsprites"
next

Sprites on Scrolling Background

If there are any visible sprites, they appear on the background. Remember, the sprite coordinates are relative to the graphicbox upper left corner, not to the background bitmap's dimensions! A sprite is added here and because his x,y location doesn't change, he stays in the center of the graphicbox while the background scrolls horizontally. He has two frames of animation, so it looks as if he is walking along.

#w.g "addsprite guy cave1 cave2"
#w.g "spritexy guy 130 70"
#w.g "cyclesprite guy 1"

for x = 5 to 500 step 5
    scan
    calldll #kernel32, "Sleep",100 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

Facing the Correct Direction

If the sprite faces left or right, you'll want to be sure to change his orientation when the direction of the background scroll changes, or he'll appear to be walking backwards!

#w.s "Scroll with guy walking left."
    #w.g "spriteorient guy mirror"
for x = 500 to 5 step -5
    scan
    calldll #kernel32, "Sleep",100 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

DEMO

Here is a small demo program that uses a background bitmap and two sprite bitmaps that come with the Liberty BASIC distribution. Copy it and save it to disk in the directory that contains your copy of Liberty BASIC.

'save and run in the LB root directory
'requires LB4 for caveman sprites
'bg1.bmp is 500x100
nomainwin
loadbmp "cave1", "sprites\cave1.bmp"
loadbmp "cave2", "sprites\cave2.bmp"
loadbmp "landscape", "sprites\bg1.bmp"
WindowHeight = 250:WindowWidth = 400
statictext #w.s, "Scolling Demo", 0,0,400,50
graphicbox #w.g, 0, 50, 400, 180
open "Scrolling Background" for window_nf as #w
#w "trapclose [quit]"
#w.s "!font verdana 18"
#w.g "down;background landscape"
#w.g "drawsprites"

#w.s "Side Scroll"
'side scroll:
for x = 5 to 1000 step 5
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

#w.s "Vertical Scroll"
'vertical scroll:
for y = 5 to 1000 step 5
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy 0 ";y
    #w.g "drawsprites"
next

#w.s "Diagonal Scroll"
'diagonal scroll:
for x = 5 to 1000 step 6
    y = x/2
    scan
    calldll #kernel32, "Sleep",50 as long, re as long
    #w.g "backgroundxy ";x;" ";y
    #w.g "drawsprites"
next

#w.s "Scroll with guy walking right."
'side scroll with guy walking:
#w.g "addsprite guy cave1 cave2"
#w.g "spritexy guy 130 70"
#w.g "cyclesprite guy 1"

for x = 5 to 500 step 5
    scan
    calldll #kernel32, "Sleep",100 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

#w.s "Scroll with guy walking left."
    #w.g "spriteorient guy mirror"
for x = 500 to 5 step -5
    scan
    calldll #kernel32, "Sleep",100 as long, re as long
    #w.g "backgroundxy ";x;" 0"
    #w.g "drawsprites"
next

#w.s "Done"
wait

[quit]
unloadbmp "landscape"
unloadbmp "cave1"
unloadbmp "cave2"
close #w:end


Home

Random Access Files

Liberty Simple Help2

Scrolling Background

Blood Presure Sim

Cellular Automata

Making Poker Game

Desktop Shortcuts2

Beginners Programming

Demos

Newsletter help

Index